import { FC, memo, useMemo, useState } from 'react';
import { MonitorPageModel } from '@/types/monitor';
import InfoCard from '@/components/info-card/InfoCard';
import MinerCountChart from '@/components/charts/MinerCountChart';
import styles from './groupMain.module.less';
import moment from 'moment';
import useSwr from 'swr';
import { fetchOnlineMiner } from '@/service/onlineMiner';
import MinerOnlineChart from '@/components/charts/MinerOnlineChart';
import CoinInfoChart from '@/components/charts/CoinInfoChart';
import useFetchGroupSwr from '@/hooks/swr/useFetchGroupSwr';
import Cell from '@/components/cell/Cell';
import { fetchMonitor } from '@/service/monitor';
import formatUnixTime from '@/utils/format/formatUnixTime';
import GpuTemp from '@/components/gpu-temp/GpuTemp';

interface IGroupMainProps {
  monitorInfo: MonitorPageModel;
  mid: number;
}

const GroupMain: FC<IGroupMainProps> = (props) => {
  const { monitorInfo, mid } = props;

  const [day, setDay] = useState(1);
  const [date, setDate] = useState<moment.Moment | null>(moment());
  const { data: onlineMinerPageModel } = useSwr(
    ['/monitoronline', date?.format('YYYY-MM-DD'), day, mid],
    (url, date, day, mid) => fetchOnlineMiner(date, day, mid),
  );

  const { data: groupPageModel } = useFetchGroupSwr(mid, 0);
  const { data: monitorPageModel } = useSwr(['/monitor', mid], (url, mid) =>
    fetchMonitor(mid),
  );

  const curMonitor = useMemo(() => {
    if (!monitorPageModel) {
      return {
        hottest: '0',
        power: '',
        version: '',
        mtime: 0,
      };
    }
    return monitorPageModel.allList.find((monitor) => monitor.id === mid);
  }, [mid, monitorPageModel]);

  return (
    <div>
      <InfoCard height={443}>
        <MinerCountChart
          all_count={monitorInfo.info.miner_num}
          {...monitorInfo.info.minerCount}
        />
        <div className={styles.dividingLine}></div>
        <MinerOnlineChart
          dataList={onlineMinerPageModel?.originList}
          onChangeDate={setDate}
          onChangeDay={setDay}
          xAxis={onlineMinerPageModel?.xAxis}
        />
      </InfoCard>

      <InfoCard height={440}>
        <CoinInfoChart
          seriesData={groupPageModel?.coinInfoChartSeriesData || []}
          legendData={groupPageModel?.coinInfoChartLegendData}
        />
        <div className={styles.dividingLine}></div>
      </InfoCard>
      <InfoCard height={324} style={{ paddingTop: 0, paddingBottom: 0 }}>
        <Cell title="角色权限" value={curMonitor?.power} />
        <Cell title="监控端版本" value={curMonitor?.version} />
        <Cell
          title="最高温度"
          value={
            <GpuTemp
              temp={parseInt(curMonitor?.hottest || '0')}
              t1={monitorInfo.info.temperature1}
              t2={monitorInfo.info.temperature2}
            />
          }
        />
        <Cell title="系统镜像" value={monitorInfo.info.os} />
        <Cell title="绑定账号" value={monitorInfo.admin_phone} />
        <Cell title="数据更新时间" value={formatUnixTime(curMonitor?.mtime!)} />
      </InfoCard>
    </div>
  );
};

export default memo(GroupMain);
